<template>
  <el-col class="info-wrapper" :span="23">
    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">检查派人</span>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">检查计划号</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">总人日</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">检查开始</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">检查结束</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col style="border: 1px solid #bbb;" :span="24">
          <el-col style="padding: 8px;">
            <el-table border :data="checkPeopleData">
              <el-table-column
                prop="date"
                label="审核员">
              </el-table-column>
              <el-table-column
                prop="date"
                label="体系">
              </el-table-column>
              <el-table-column
                prop="date"
                label="组内身份">
              </el-table-column>
              <el-table-column
                prop="date"
                label="注册资格">
              </el-table-column>
              <el-table-column
                prop="date"
                label="专业">
              </el-table-column>
              <el-table-column
                prop="date"
                label="联系方式">
              </el-table-column>
            </el-table>
          </el-col>
        </el-col>
      </el-tab-pane>
    </el-tabs>

    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">审核员需要提交的资料模版</span>
        <el-col style="padding: 8px;" :span="24">
          <el-col v-for="item,index in infoTemplateList" :key="index" style="margin-bottom: 10px;" :span="12">
            <el-link href="">{{item.name}}</el-link>
          </el-col>

          <el-col style="margin-bottom: 10px;" :span="12">
            <el-link href="">XF08-08 文件审查记录-修订</el-link>
          </el-col>
          <el-col style="margin-bottom: 10px;" :span="12">
            <el-link href="">XF09-08 文件评审报告</el-link>
          </el-col>
          <el-col style="margin-bottom: 10px;" :span="12">
            <el-link href="">XF10-08 关于实施工厂检查的通知</el-link>
          </el-col>
          <el-col style="margin-bottom: 10px;" :span="12">
            <el-link href="">XF11-08 首末次会议签到表</el-link>
          </el-col>
          <el-col style="margin-bottom: 10px;" :span="12">
            <el-link href="">XF12-08 首次会议发言提纲</el-link>
          </el-col>
          <el-col style="margin-bottom: 10px;" :span="12">
            <el-link href="">XF13-08 工厂检查记录表</el-link>
          </el-col>
          <el-col style="margin-bottom: 10px;" :span="12">
            <el-link href="">XF15-08 不符合报告和纠正措施报告</el-link>
          </el-col>
          <el-col style="margin-bottom: 10px;" :span="12">
            <el-link href="">XF16-08 工厂检查报告-修订</el-link>
          </el-col>
          <el-col style="margin-bottom: 10px;" :span="12">
            <el-link href="">XF17-08 检查员评价表格</el-link>
          </el-col>
        </el-col>
      </el-tab-pane>
    </el-tabs>

    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">文档上传</span>
        <el-col style="padding: 8px;">
          <el-table border :data="uploadDocumentData">
            <el-table-column
              prop="date"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="date"
              label="文档名">
            </el-table-column>
            <el-table-column
              prop="date"
              label="上传时间">
            </el-table-column>
            <el-table-column
              prop="date"
              label="上传人">
            </el-table-column>
            <el-table-column
              prop="date"
              label="文档类型">
            </el-table-column>
            <el-table-column prop="operation" label="操作">
              <el-link type="primary" style="margin-right: 8px" herf="">下载</el-link>
              <el-link type="primary" @click="deleteRow">删除</el-link>
            </el-table-column>
          </el-table>
        </el-col>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">检验抽样</span>
        <el-col style="padding: 8px;">
          <el-table border :data="checkSampleData">
            <el-table-column
              prop="date"
              label="产品名称">
            </el-table-column>
            <el-table-column
              prop="date"
              label="型号\规格">
            </el-table-column>
            <el-table-column
              prop="date"
              label="抽样基数">
            </el-table-column>
            <el-table-column
              prop="date"
              label="抽样数量">
            </el-table-column>
            <el-table-column
              prop="date"
              label="送样数量">
            </el-table-column>
          </el-table>
        </el-col>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">评定问题</span>
        <el-col style="padding: 8px;">
          <el-table border :data="evaluateProblemData">
            <el-table-column
              prop="date"
              label="等级">
            </el-table-column>
            <el-table-column
              prop="date"
              label="标题">
            </el-table-column>
            <el-table-column
              prop="date"
              label="判断规则">
            </el-table-column>
            <el-table-column
              prop="date"
              label="内容">
            </el-table-column>
            <el-table-column
              prop="date"
              label="问题回复">
            </el-table-column>
            <el-table-column
              prop="operation"
              label="状态">
            </el-table-column>
          </el-table>
        </el-col>
      </el-tab-pane>
    </el-tabs>
  </el-col>
</template>

<script>
export default {
  name: 'productReviewDetail',
  data() {
    return {
      checkPeopleData: [], // 检查派人表格数据
      infoTemplateList: [], // 资料模版列表
      uploadDocumentData: [], // 文档上传表格数据
      checkSampleData: [], // 检验抽样表格数据
      evaluateProblemData: [], // 文档上传表格数据
    };
  },
  mounted() {
    this.getInfoTemplateList();
    this.queryTableData();
    this.queryCheckPeopleData();
  },
  methods: {
    getInfoTemplateList() {
      // todo：获取资料模版列表接口
    },
    queryTableData() {
      // todo：获取表格数据接口
    },
    queryCheckPeopleData() {
      // todo：获取检查派人数据接口
    },
  },
};
</script>

<style lang="less" scoped>
.info-wrapper {
  font-family: Source Han Sans CN;
  font-weight: 400;
  height: 100%;

  .tabs-card {
    margin-bottom: 15px;
  }

  .row-content {
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
  }

  .title-span {
    text-align: center;
    background-color: #f0f5f8;
    justify-content: end;
    padding-right: 20px;
  }

  .col-content {
    min-height: 40px;
    border-right: 1px solid #bbb;
    padding-left: 4px;
    display: flex;
    align-items: center;
  }

  .table-span {
    padding: 8px;
    border-right: 1px solid #bbb;
  }
}
</style>
